<template>
    <div style="user-select: none;">
      <h1>P152 - watchEffect函数</h1>
      <div>
        点下面的每一行文字都有用惊喜
        <h4 @click="person.name+='~'">姓名: {{ person.name }}</h4>
        <h4 @click="person.age++">年龄: {{ person.age }}</h4>
        <h4 @click="person.job.type+='!'">工作: {{ person.job.type }}</h4>
        <h4 @click="person.job.salary++">薪水: {{ person.job.salary }}</h4>
      </div>
    </div>
    <!-- 
        
     -->
  </template> 
          
    <script>
  import { computed, reactive, ref, watch,watchEffect } from "vue";
  export default {
    name: "App",
    setup(props, context) {
        let person = reactive({
            name:'mikaisa',
            age:18,
            job:{
                salary:12,
                type:'前端工程师'
            }
        });

        // watchEffect的套路是：不用指明监视哪个属性，监视的回调中用到哪个属性，那就监视哪个属性
        watchEffect(()=>{
            // 回调函数里使用一个变量存储这个属性，当这个属性发生变化则会触发该回调函数
            let x1 = person.name;
            console.log('这个人的名字变了',x1);
        })

        return {
            person,
        }

    },
  };
  </script>
          
  <style>
  .zhedie {
    height: 15px;
    overflow: hidden;
  }
  </style>
          